<template>
  <div class="List">
    <div class="like"> 
        <h3>猜你喜欢</h3>
        <!-- 排序 -->
        <div class="sort">
            <span v-for="(item,index) in sortArr" :key="index">{{item}}</span>
        </div>
        <!-- 年货节热卖 -->
        <div class="preferential">
            <span v-for="(item,index) in preArr" :key="index">{{item}}</span>
        </div>
        <div class="goods" v-for="(item,index) in goodsArr" :key="index">
            <img :src="item.pic" alt="">
            <div class="goodsInfor">
                <h3>{{item.title}}</h3>
                <!-- 评分 -->
                <p class="score">
                    <span>{{item.score}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>月售{{item.saled}}</span>
                </p>
                <!-- 起送 -->
                <p class="gap">
                    <span>起送￥{{item.price}}</span>
                    <span>{{item.gap}}km</span>
                </p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let img="https://img0.baidu.com/it/u=2557415556,469692988&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
export default {
    // 定义数据
    data(){
        return{
            sortArr:["综合排序","距离最近","销量最高","筛选"],
            preArr:["年货节热卖","津贴联盟","满减优惠","品质联盟"],
            goodsArr:[
                {pic:img,title:"金百万烤鸭",score:"4.3",saled:"1632",price:"20",gap:"3.9"},
                {pic:img,title:"稻香园饺子馆",score:"4.5",saled:"1772",price:"10",gap:"4.0"},
                {pic:img,title:"美味鲜烧烤",score:"4.7",saled:"1032",price:"30",gap:"3.6"},
            ],
        };
    }
}
</script>

<style lang="scss" scoped>
.like{
    margin: 10px;
    padding-bottom: 40px;
}
.like>.sort{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.like>.sort>span{
    font-size: 14px;
    display: inline-block;
    padding: 6px 10px;
    line-height: 24px;
}
.like>.preferential{
    margin: 16px 0px;
    display: flex;
    justify-content: space-between;
}
.like>.preferential>span{
    font-size: 14px;
    display: inline-block;
    padding: 6px 10px;
    line-height: 24px;
    background-color: #b1b1b1;
    border-radius: 4px;
}
.like>.goods{
    display: flex;
}
.like>.goods>img{
    width: 40%;

}
.like>.goods>.goodsInfor{
    margin-left: 10px;
    margin-top: 20px;
}
.like>.goods>.goodsInfor>.score{
    margin-top: 20px;
    font-size: 14px;
}
.like>.goods>.goodsInfor>.gap{
    margin-top: 14px;
    font-size: 14px;
}
.like>.goods>.goodsInfor>.gap>span:nth-child(2){
    margin-left: 80px;
}
</style>